<template>

 <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="姓名">
      <el-input v-model="formInline.SName" placeholder="请填写姓名" clearable />
    </el-form-item>
   
    <el-form-item>
      <el-button type="primary"  @click="getsche"  color="#33B5BA" style="margin-right: 900px; color: #FFF;">查询</el-button>
      <el-button @click="exportToExcel" type="primary" color="#6238C8"  >导出</el-button>
    </el-form-item>
  </el-form>
 
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="name" label="姓名/请假月份" width="120" />
    <el-table-column v-for="month in months" :key="month" :label="month" width="100" >
        <template #default="{row}">  
      <el-button v-if="row[month] > 0"  link type="danger" @click="showDetail(row.name, month)" >
          {{ row[month] }}
        </el-button>
      <span v-else>  {{ 0 }} </span>
        </template>
    </el-table-column>
    
  </el-table>

  <el-dialog v-model="detailVisible" :title="`${selectedName} - ${selectedMonth}请假详情`">

    <p>请假总工时: {{ selectedHours }} 小时</p>
    
  </el-dialog>
</template>

<script lang="ts" setup>
import axios from 'axios'
import {onMounted, ref,reactive,watch} from 'vue'
import moment from 'moment'
import Read from  '@/http/Readhttp'
import Write from '@/http/Writehttp'


const pages=reactive({
    PageIndex:1,
    PageSize:15,
    totalCount:0,
    totalPage:0
})

const datas=ref([])
watch(pages,()=>{
  getdata()
})
const getdata=()=>{
 
    Read.get("/api/Approval/ShowApp",{params:{
        PageIndex:pages.PageIndex,
        PageSize:pages.PageSize,
    }}).then(res=>{
    datas.value=res.data.result
    pages.totalCount=res.data.totalCount
    pages.totalPage=res.data.totalPage
})
}


const tableData =ref<LeaveSummaryRow[]>([])
const months=['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
interface LeaveSummaryRow {
  name: string
  [month: string]: any
}
const getsche=()=>{
   
      Read.get("/api/Approval/ShowSche",{params:{SName:formInline.SName || ''}}).then(res=>{
        if(res.data.code==200)
      {
         const summaryData = res.data.datas.employeeLeaveData
        tableData.value = Object.entries(summaryData).map(([name, monthsData]) => {
        const row: LeaveSummaryRow = { name }
        months.forEach((month, index) => {
          // 处理可能的空数组或未定义情况
          row[month] = Array.isArray(monthsData) && monthsData[index] ? monthsData[index] : 0
        })
        return row
      })
      }
      })
      
    } 

onMounted(()=>{
    getsche();
})

const detailVisible = ref(false)
const selectedName = ref('')
const selectedMonth = ref('')
const selectedHours = ref(0)

const showDetail = (name:any, month:any) => {
  selectedName.value = name
  selectedMonth.value = month
 selectedHours.value = tableData.value.find(item => item.name === name)?.[month] ?? ''; 
  detailVisible.value = true
}

const formInline = reactive({
  SName:''
})


import * as XLSX from 'xlsx'
import { REPEAT_DELAY } from 'element-plus/es/directives/repeat-click/index.mjs'

const exportToExcel = () => {
  // 准备导出数据
  const exportData = tableData.value.map(row => {
    const newRow = { '姓名/请假月份': row.name }
    
    months.forEach(month => {
     (newRow as any)[month] = row[month] || 0;
    })
    return newRow
  })

  // 创建工作表
  const ws = XLSX.utils.json_to_sheet(exportData)
  
  // 创建工作簿
  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, ws, "请假汇总")
  
  // 导出文件
  XLSX.writeFile(wb, `请假汇总_${new Date().toLocaleDateString()}.xlsx`)
}
</script>

<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
